<template>
    <el-dialog title="支付上海电信" :visible.sync="dialog" width="40%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
            <el-form-item label="注册账号：" prop="name" v-show="isShow">
                <el-input v-model="ruleForm.name" auto-complete="off" :disabled="true" placeholder="南通塔扬信息科技"></el-input>
            </el-form-item>
            <el-form-item label="收付款类型：" prop="type" v-show="!isShow">
                <el-select v-model="ruleForm.type" filterable placeholder="请选择" class="w100" @change="select">
                    <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="label2" prop="value2">
                <el-select v-model="ruleForm.value2" filterable placeholder="请选择" class="w100">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="label3" prop="price">
                <el-input type="number" step="0.01" v-model="ruleForm.price" auto-complete="off" placeholder="可以输入小数点后两位"></el-input>
            </el-form-item>
            <el-form-item :label="label4" prop="value1">
                <div class="block">
                    <el-date-picker class="w100" v-model="ruleForm.value1" type="date" placeholder="选择日期">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="说明：" prop="description">
                <el-input v-model="ruleForm.description" placeholder=""></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确认支付</el-button>
        </span>
    </el-dialog>
</template>

<script>
    export default {
        props: {
            dialogVisible: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                dialog: false,
                isShow: true,
                label2: '支付方式：',
                label3: '支付金额（元）：',
                label4: '支付日期：',
                ruleForm: {
                    value1: '',
                    value2: '',
                    name: '',
                    description: '',
                    price: '',
                    type: ''
                },
                type: [
                    {
                    value: '选项1',
                    label: '收款'
                    }, {
                    value: '选项2',
                    label: '付款'
                    }
                ],
                options1: [{
                    value: '选项1',
                    label: '支付宝'
                }, {
                    value: '选项2',
                    label: '微信支付'
                }, {
                    value: '选项3',
                    label: '现金'
                }, {
                    value: '选项4',
                    label: '银行转账'
                }, {
                    value: '选项5',
                    label: '其他'
                }],
                rules: {
                    value2: [{
                        required: true,
                        message: '请输入收支付方式',
                        trigger: 'change'
                    }],
                    price: [{
                        required: true,
                        message: '请输入收支付金额',
                        trigger: 'blur'
                    }, {
                        pattern: /^\d+(\.\d{1,2})?$/,
                        message: '请输入两位小数'
                    }],
                    value1: [{
                        type: 'date',
                        required: true,
                        message: '请选择日期',
                        trigger: 'change'
                    }],
                    type: [{
                        required: true,
                        message: '请选择收付款类型',
                        trigger: 'change'
                    }]
                }
            }
        },
        created() {
            if(this.$route.name != 'carrier_order') {
                this.isShow = false;
            } else {
                this.isShow = true;
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.dialog = false
            },
            select(val) {
                if (val == '选项1') {
                    this.label2 = '支付方式：';
                    this.label3 = '支付金额（元）：';
                    this.label4 = '支付日期：';
                } else {
                    this.label2 = '付款方式：';
                    this.label3 = '付款金额（元）：';
                    this.label4 = '付款日期：';
                }
            },
            handleColse(){
                this.$emit("dialogColse") //外部组件监听该方法，修改props中isDialogVisible的值
            }
        },
        watch: {
            dialogVisible() {
                console.log(this.dialogVisible)
                this.dialog = this.dialogVisible
            },

            dialog() {  //点击了对话框“x"号,
                if(!this.dialog){
                    this.handleColse();
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .w100 {
        width: 100%;
    }
</style>